<template>
  <div class="alert_container">
    <section class="tip_text_container">
      <p class="tip_icon">
        <i class="iconfont icon-warning"></i>
      </p>
      <p class="tip_text">
        {{alertText}}
      </p>
      <p class="tip_confirm" @click="closeTip">确认</p>
    </section>
  </div>
</template>
<script>
export default {
  props: ['alertText'],
  methods: {
    closeTip() {
      this.$emit('closeTip');
    },
  },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
 .alert_container
   position: fixed
   top: 0
   left: 0
   right: 0
   bottom: 0
   z-index: 200
   background: rgba(0,0,0,.5)
   .tip_text_container
     position: absolute
     top: 50%
     left: 50%
     width: 300px
     height: 160px
     margin-left: -150px
     margin-top: -80px
     text-align: center
     background-color: white
     border-radius: 10px
     .tip_icon
       width: 100%
       margin-bottom: 16px
       margin-top: 7px
       i
         font-size: 65px
         color: #25a4bb
     .tip_text
       margin-bottom: 16px
       font-size: 16px
       color: #333
     .tip_confirm
       width: 100%
       height: 40px
       line-height: 40px
       color: #fff
       font-weight: bold
       font-size: 16px
       background-color: #25a4bb
       cursor: pointer
       border-bottom-left-radius: 10px;
       border-bottom-right-radius: 10px;
</style>
